<template>
  <div>
      <find @find="findAccount"></find>
      <a-button type="primary"
      @click="showAddFrom()">添加账号</a-button>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="list"
      :rowKey="(record) => record.id"
    >
      <span slot="index" slot-scope="text, record">{{ record.id }}</span>
      <span slot="createTime" slot-scope="text">{{ dataReset(text) }}</span>
      <template #status="text">
          <a-tag
          :color="text === 1? 'green': 'volcano'">
            {{ text === 1 ? "启用" : "禁用" }}
          </a-tag>
      </template>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleStatus(record)">{{
            record.status === 0 ? "启用" : "禁用"
          }}</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </template>
      </span>
    </a-table>
    <form-box
    title="Edit"
    @hide="hideForm"
    @update="updateAccount"
    v-show="showFrom">
        <a-form-item label="用户名">
        <a-input v-decorator="['Account',{initialValue: getValue.account, rules:[{required: true, message: '请输入正确的用户名'}]}]"></a-input>
        </a-form-item>
        <a-form-item label="密码">
            <a-input v-decorator="['password',{initialValue: '123456'}]" allow-clear/>
        </a-form-item>
        <a-form-item label="角色">
            <a-select v-decorator="['role',{initialValue: getValue.roleName}]">
            <a-select-option :value="item.roleId" 
            v-for="(item,index) in roleList" :key="index">{{ item.name }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="部门">
            <a-select v-decorator="['dept',{initialValue: getValue.deptName}]">
            <a-select-option :value="item.id"
            v-for="(item, index) in deptList"
            :key="index">{{ item.name }}</a-select-option>
            
            </a-select>
        </a-form-item>
        <a-form-item label="职务">
            <a-select :defaultValue="getValue.name">
            <a-select-option value="客服">客服</a-select-option>
            <a-select-option value="运营">运营</a-select-option>
            <a-select-option value="总经理">总经理</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="姓名">
            <a-input v-decorator="['name',{initialValue: getValue.name, rules:[{required: true, message: '请输入姓名'}]}]"></a-input>
        </a-form-item>
        <a-form-item label="手机号码">
            <a-input v-decorator="['phone',{initialValue: getValue.phone, rules:[{ message: '请输入正确的手机号码'}]}]"></a-input>
        </a-form-item>
    </form-box>

    <form-box title="add"
    @hide="hideAddFrom"
    @update="AddAccount"
    v-show="showAddFromFlag">
        <a-form-item label="用户名">
        <a-input v-decorator="['Account',{initialValue: getValue.account, rules:[{required: true, message: '请输入正确的用户名'}]}]"></a-input>
        </a-form-item>
        <a-form-item label="密码">
            <a-input v-decorator="['password',{initialValue: '123456', rules:[{required: true, message: '请输入正确的密码'}]}]" allow-clear/>
        </a-form-item>
        <a-form-item label="角色">
            <a-select v-decorator="['role',{initialValue: getValue.roleName, rules:[{required: true, message: '请选择正确的角色'}]}]">
            <a-select-option :value="item.roleId" 
            v-for="(item,index) in roleList" :key="index">{{ item.name }}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="部门">
            <a-select v-decorator="['dept',{initialValue: getValue.deptName, rules:[{required: true, message: '请选择正确的部门'}]}]">
            <a-select-option :value="item.id"
            v-for="(item, index) in deptList"
            :key="index">{{ item.name }}</a-select-option>
            
            </a-select>
        </a-form-item>
        <a-form-item label="姓名">
            <a-input v-decorator="['name',{initialValue: getValue.name, rules:[{required: true, message: '请输入姓名'}]}]"></a-input>
        </a-form-item>
        <a-form-item label="手机号码">
            <a-input v-decorator="['phone',{initialValue: getValue.phone, rules:[{required: true,  message: '请输入正确的手机号码'}]}]"></a-input>
        </a-form-item>
    </form-box>
  </div>
</template>

<script>
import moment from "moment";
import { jueseList, changeStatus, deleteJuese, updataJuese, addJuese } from "@/api/system/user.js";
import { fetchRoleList } from "@/api/system/role";
import { fetchDepartmentList } from "@/api/system/dept";
import formBox from '../../components/formBox.vue';
import Find from '../../components/Find.vue';
export default {
  components: { formBox, Find },
  data() {
    return {
      showFrom : false,
      showAddFromFlag: false,
      updateIndex : null,
      list: [],
      deptList: [],
      roleList: [],
      columns: [
        {
          title: "ID",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
        },
        {
          title: "用户名",
          dataIndex: "account",
          key: "account",
        },
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "角色",
          dataIndex: "roleName",
          key: "juese",
        },
        {
          title: "状态",
          dataIndex: "status",
          needTotal: true,
          scopedSlots: { customRender: "status" },
        },
        {
          title: "部门",
          dataIndex: "deptName",
          key: "bumen",
        },
        {
          title: "手机号",
          dataIndex: "phone",
          key: "tel",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          key: "time",
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "150px",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  methods: {
    dataReset: (time) => {
      return moment(time).format("YYYY-MM-DD");
    },
    handleStatus(data) {
      const status = data.status === 0 ? 1 : 0;
      console.log(status);
      changeStatus({
        adminId: data.id,
        status: status,
      })
        .then(() => {
          this.systemList();
        })
        .catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    handleEdit(data) {
      this.updateIndex = data.id;
      console.log("====Value====", this.getValue)
      this.showFrom = true;
    },
    handleDelete(data) {
      let index = data.id;
      console.log(index)
      deleteJuese({
          ids: index,
      }).then(()=>{
          this.systemList();
      }).catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    updateAccount(date){
        updataJuese({
            id: this.getValue.id,
            name: date.name,
            pw: date.password,
            roleId: date.role,
            deptId: date.dept,
            account: date.Account,
            phone: date.phone,
        }).then((res)=>{
            console.log("======updateAccount====",res);
            this.systemList();
            this.hideForm();
        })
        
    },
    systemList() {
      jueseList({
        token: "89c71f5f29d34b4699bcb516affc950d", 
      }).then((res) => {
        const content = res.data.data.content;
        console.log(res);
        this.list = content;
      }).catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    getDeptList(){
        fetchDepartmentList({
            token: "89c71f5f29d34b4699bcb516affc950d",
        }).then((res)=> {
            console.log("====dept====",res.data.data);
            this.deptList = res.data.data;
        }).catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    getRoleList(){
        fetchRoleList({
            token: "89c71f5f29d34b4699bcb516affc950d",
        }).then((res)=>{
            console.log("====role====",res.data.data);
            this.roleList = res.data.data;
        }).catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    hideForm(){
        this.showFrom = false;
    },
    showForm(){
        this.showFrom = true;
    },

    //=========AddAccount=========
    hideAddFrom(){
        this.showAddFromFlag = false;
    },
    showAddFrom(){
        this.showAddFromFlag = true;
    },
    AddAccount(date){
        addJuese({
            name: date.name,
            pwd: date.password,
            roleId: date.role,
            deptId: date.dept,
            account: date.Account,
            phone: date.phone,
            headimg: 'default.jpg',
            status: 1,
        }).then((res)=>{
            console.log("======addAccount====",res);
            this.systemList();
            this.hideAddFrom();
        })
    },
    //========FindAccount========
    findAccount(value){
        jueseList({
            token: "89c71f5f29d34b4699bcb516affc950d", 
        }).then((res) => {
            const content = res.data.data.content;
            if(value == "") this.list = content;
            else {
                this.list = content.filter(item => 
                    (item.name === value|| item.account === value|| item.phone === value)
                );
            }
            
        }).catch((_) => {
            console.log(_);
            //   this.confirmLoading = false;
        });
        
    },
    
  },
  computed:{
    getValue(){
        if(this.updateIndex!=null)
        return this.list.filter(item =>
            item.id === this.updateIndex
        )[0];
        else return '';
    }
  },
  mounted() {
    //   token:"89c71f5f29d34b4699bcb516affc950d"
    //  name: "admin"
    this.systemList();
    this.getDeptList();
    this.getRoleList();
  },
};
</script>

<style></style>